<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ page import="java.util.List"%>
<%@ page import="com.jack.bookshop.vo.BookVo"%>
<%@ page import="com.jack.bookshop.dao.BookDao"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page isELIgnored="false" %>
<%
    // 调用dao访问数据库
    List<BookVo> bookList = new BookDao().getListByRandom(8);
    // 把结果放在页面容器中
    pageContext.setAttribute("bookList", bookList);
%>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Justin's Bookshop</title>
    <!-- 导入资源 -->
    <%@ include file="resource.jsp"%>
</head>
<body>
<!-- 导入页头 -->
<%@ include file="header.jsp"%>
<div class="container" style="margin:24px auto;">
    <div class="row">
        <c:forEach var="book" items="${pageScope.bookList}" varStatus="status">
            <div class="col-3 column-gap-3">
                <div class="card">
                    <img src="assets/images/books/${book.image_url}"
                         class="card-img-top" />
                    <div class="card-body">
                        <h4>${book.title}</h4>
                        <p class="card-text">${book.c1_text} > ${book.c2_text} </p>
                        <p class="card-text">Score:
                            <c:forEach begin="1" end="${book.score}" var="i">
                                <i class="bi bi-star-fill"></i>
                            </c:forEach>
                        </p>
                        <p class="card-text">Price: $${book.price}</p>
                        <a href="book-one.jsp?id=${book.id}" class="btn btn-primary">Go to View</a>
                    </div>
                </div>
            </div>
        </c:forEach>
    </div>
</div>
<!-- 导入页脚 -->
<%@ include file="footer.jsp"%>
</body>
</html>